<template>
  <view class="component">
    <view class="sign_btn">
      <!-- 图片展示 -->
      <image 
        v-if="item1.imgUrl" 
        :src="item1.imgUrl.split(' ')[0]" 
        mode="aspectFill" 
        class="intro-image"
      ></image>
      
      <!-- 文字介绍 -->
      <rich-text 
        :nodes="item1.spotIntro" 
        class="intro-text"
      ></rich-text>
    </view>
  </view>
</template>

<script>
  import { mapState } from 'pinia'
  import { useUserInfoStore } from '../../../stores/userInfo.js'
  
  export default {
    props: {  
      item1: {  
        type: Object,  
      },
    },
    name: 'introduce',
    computed: {
      ...mapState(useUserInfoStore, ['userId', 'phone', 'username', 'state'])
    }
  }
</script>

<style scoped>
  .component {
    padding: 20rpx;
  }
  
  .sign_btn {
    display: flex;
    flex-direction: column;
  }
  
  .intro-image {
    width: 100%;
    height: 400rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
  }
  
  .intro-text {
    font-size: 28rpx;
    line-height: 1.6;
    color: #333;
  }
</style>